import { makeObservable, configure, observable, action, computed } from 'mobx'
configure({ enforceActions: 'observed' })
class TodoState {
  constructor() {
    makeObservable(this)
  }
  @observable todos = []
  @observable filter = 'all' // 筛选条件

  // 添加任务
  @action.bound todoAdd(taskName) {
    this.todos.push({
      taskName,
      isCompleted: false,
    })
  }
  // 删除任务
  @action.bound todoDelete(index) {
    this.todos.splice(index, 1)
  }

  // 更改任务的是否已完成状态
  @action.bound changeCompleted(todo) {
    todo.isCompleted = !todo.isCompleted
  }

  // 更改选中状态
  @action changeFilter = (filter) => {
    this.filter = filter
  }

  // 未完成的todo列表
  @computed get unfinishedTodoCount() {
    return this.todos.filter((todo) => todo.isCompleted === false).length
  }

  // 筛选符合选中条件的todo数据列表
  @computed get filterTodoS() {
    switch (this.filter) {
      case 'all':
        return this.todos
      case 'active':
        return this.todos.filter((todo) => todo.isCompleted === false)
      case 'completed':
        return this.todos.filter((todo) => todo.isCompleted === true)
      default:
        return this.todos
    }
  }
}

const todo = new TodoState()

export default todo
